<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Free Bootstrap Themes" />
    <meta name="author" content="" />

    <title>Music Studio</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">
	
	 <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
	
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

	<!-- /////////////////////////////////////////Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="index.html">MusicStudio</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" href="index.html">Home</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="single.html">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="gallery.html">Gallery</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
	<!-- Navigation -->

	<!-- /////////////////////////////////////////Header -->
	<header id="page-top">
		<div class="wrap-header">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<div class="intro-text">
							<div class="intro-lead-in">Welcome To Our Studio!</div>
							<div class="intro-heading">It's Nice To Meet You</div>
						</div>
						<a href="single.html" class="btn btn-1">About Us</a>
						<a href="contact.html" class="btn btn-2">Contact Us</a>
					</div>
				</div>
			</div>
		</div>
    </header>
	<!-- Header -->
	<div class="gradient-line clearfix">
		<div style="background: none repeat scroll 0% 0% #F69087;"></div>
		<div style="background: none repeat scroll 0% 0% #85CCB1;"></div>
		<div style="background: none repeat scroll 0% 0% #966b20;"></div>
		<div style="background: none repeat scroll 0% 0% #85A9B3;"></div>
		<div style="background: none repeat scroll 0% 0% #B0CB7A;"></div>
	</div>
	
	<!-- /////////////////////////////////////////Content -->
	<div id="page-content" class="index-page">
		<div class="container">
			<div class="col-md-12">
				<div class="team">
					<h2>Our Team</h2>
					<div class="row">
					<div class="col-md-3">
						<div class="row">
							<div class="zoom-container">
								<div class="zoom-caption">
									<h3>Name</h3>
									<span>Duis aute irure dolor</span>
									<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Sydney College in Virginia, looked up one of the more obscure Latin words.</p>
									<ul class="list-inline">
										<li><a href="#"><i class="fa fa-twitter"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-facebook"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-linkedin"></i></a>
										</li>
									</ul>
								</div>
								<a href="single.html">
									<img src="images/p-1.jpg" />
								</a>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="row">
							<div class="zoom-container">
								<div class="zoom-caption">
									<h3>Name</h3>
									<span>Duis aute irure dolor</span>
									<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Sydney College in Virginia, looked up one of the more obscure Latin words.</p>
									<ul class="list-inline">
										<li><a href="#"><i class="fa fa-twitter"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-facebook"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-linkedin"></i></a>
										</li>
									</ul>
								</div>
								<a href="single.html">
									<img src="images/p-2.png" />
								</a>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="row">
							<div class="zoom-container">
								<div class="zoom-caption">
									<h3>Name</h3>
									<span>Duis aute irure dolor</span>
									<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Sydney College in Virginia, looked up one of the more obscure Latin words.</p>
									<ul class="list-inline">
										<li><a href="#"><i class="fa fa-twitter"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-facebook"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-linkedin"></i></a>
										</li>
									</ul>
								</div>
								<a href="single.html">
									<img src="images/p-3.png" />
								</a>
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="row">
							<div class="zoom-container">
								<div class="zoom-caption">
									<h3>Name</h3>
									<span>Duis aute irure dolor</span>
									<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Sydney College in Virginia, looked up one of the more obscure Latin words.</p>
									<ul class="list-inline">
										<li><a href="#"><i class="fa fa-twitter"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-facebook"></i></a>
										</li>
										<li><a href="#"><i class="fa fa-linkedin"></i></a>
										</li>
									</ul>
								</div>
								<a href="single.html">
									<img src="images/p-4.png" />
								</a>
							</div>
						</div>
					</div>
					</div>
				</div>
			</div>
			<div id="main-content" class="col-md-8">
				<article>
					<div class="art-header">
						<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
						<div class="info">By <a href="#">Admin</a> June 12, 2015 - 0 Comments</div>
					</div>
					<div class="art-content">
						<div class="col-md-5">
							<img src="images/5.jpg" />
						</div>
						<div class="col-md-7">
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
						<a href="#" class="btn btn-3 f-right">More</a>
						</div>
					</div>
				</article>
				<article>
					<div class="art-header">
						<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
						<div class="info">By <a href="#">Admin</a> June 12, 2015 - 0 Comments</div>
					</div>
					<div class="art-content">
						<div class="col-md-5">
							<img src="images/6.jpg" />
						</div>
						<div class="col-md-7">
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
						<a href="#" class="btn btn-3 f-right">More</a>
						</div>
					</div>
				</article>
				<article>
					<div class="art-header">
						<a href="#"><h2>Lorem ipsum dolor sit amet</h2></a>
						<div class="info">By <a href="#">Admin</a> June 12, 2015 - 0 Comments</div>
					</div>
					<div class="art-content">
						<div class="col-md-5">
							<img src="images/7.jpg" />
						</div>
						<div class="col-md-7">
						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
						<a href="#" class="btn btn-3 f-right">More</a>
						</div>
					</div>
				</article>
				<div class="event">
					
						<h2>UPCOMING SHOWS</h2>
					
					
						<div class="col-md-6">
							<div class="row">
								<div class="col-xs-3">
									<div style="line-height: 1;margin-bottom: 15px;">
										<strong style="font-size: 28px;">30</strong></br>
										<span style="font-size: 22px;">Jan</span></br>
										<span>2016</span>
									</div>
								</div>
								<div class="col-xs-8">
									<h5>Strasbourg, FR — La Laiterie </h5>
									<a href="#">Find Ticket</a>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-3">
									<div style="line-height: 1;margin-bottom: 15px;">
										<strong style="font-size: 28px;">30</strong></br>
										<span style="font-size: 22px;">Jan</span></br>
										<span>2016</span>
									</div>
								</div>
								<div class="col-xs-8">
									<h5>Strasbourg, FR — La Laiterie </h5>
									<a href="#">Find Ticket</a>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-3">
									<div style="line-height: 1;margin-bottom: 15px;">
										<strong style="font-size: 28px;">30</strong></br>
										<span style="font-size: 22px;">Jan</span></br>
										<span>2016</span>
									</div>
								</div>
								<div class="col-xs-8">
									<h5>Strasbourg, FR — La Laiterie </h5>
									<a href="#">Find Ticket</a>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<img src="images/2.jpg" />
						</div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="tlinks">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>
			
			<div id="sidebar" class="col-md-4">
				<div class="widget wid-vid">
					<div class="heading"><h4>Popular Videos</h4></div>
					<div class="content">
						<div class="zoom-container">
							<a href="single.html">
								<span class="zoom-caption">
									<i class="icon-play fa fa-play"></i>
								</span>
								<img src="images/14.jpg" />
							</a>
						</div>
					</div>
				</div>
				<div class="widget wid-tags">
					<div class="heading"><h4>Tag</h4></div>
					<div class="content">
						<ul class="list-inline">
							<li><a href="#">animals</a></li>
							<li><a href="#">cooking</a></li>
							<li><a href="#">countries</a></li>
							<li><a href="#">home</a></li>
							<li><a href="#">likes</a></li>
							<li><a href="#">photo</a></li>
							<li><a href="#">travel</a></li>
							<li><a href="#">video</a></li>
						</ul>
					</div>
				</div>
				<div class="widget wid-posts">
					<div class="content">
						<ul class="nav nav-tabs">
							<li class="active"><a data-toggle="tab" href="#most">Most Plays</a></li>
							<li><a data-toggle="tab" href="#popular">Popular</a></li>
							<li><a data-toggle="tab" href="#recent">Recent</a></li>
							<li><a data-toggle="tab" href="#random">Random</a></li>
						</ul>
						<div class="tab-content">
							<div id="most" class="tab-pane fade in active">
								<div class="post">
									<a href="#"><img src="images/1.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/2.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/3.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/8.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
							</div>
							<div id="popular" class="tab-pane fade">
								<div class="post">
									<a href="#"><img src="images/2.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/3.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/4.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/5.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
							</div>
							<div id="recent" class="tab-pane fade">
								<div class="post">
									<a href="#"><img src="images/6.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/7.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/8.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/9.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
							</div>
							<div id="random" class="tab-pane fade">
								<div class="post">
									<a href="#"><img src="images/10.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/5.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/7.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
								<div class="post">
									<a href="#"><img src="images/8.jpg"/></a>
									<div class="wrapper">
									  <h5><a href="#">A Blue Morning</a></h5>
									  <p>March 1, 2015</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="widget wid-gallery">
					<div class="heading"><h4>Gallery</h4></div>
					<div class="content">
						<div class="row">
							<div class="col-xs-4">
								<a href="#"><img src="images/7.jpg"></a>
								<a href="#"><img src="images/8.jpg"></a>
								<a href="#"><img src="images/9.jpg"></a>
							</div>
							<div class="col-xs-4">
								<a href="#"><img src="images/6.jpg"></a>
								<a href="#"><img src="images/7.jpg"></a>
								<a href="#"><img src="images/8.jpg"></a>
							</div>
							<div class="col-xs-4">
								<a href="#"><img src="images/7.jpg"></a>
								<a href="#"><img src="images/9.jpg"></a>
								<a href="#"><img src="images/6.jpg"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="gradient-line clearfix">
		<div style="background: none repeat scroll 0% 0% #F69087;"></div>
		<div style="background: none repeat scroll 0% 0% #85CCB1;"></div>
		<div style="background: none repeat scroll 0% 0% #966b20;"></div>
		<div style="background: none repeat scroll 0% 0% #85A9B3;"></div>
		<div style="background: none repeat scroll 0% 0% #B0CB7A;"></div>
	</div>
	<!-- /////////////////////////////////////////Footer -->
	<footer>
		<div class="top-footer">
			<div class="container">
				<div class="row">
					<ul class="list-inline">
						<li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
						<li><a href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
						<li><a href="#"><i class="fa fa-linkedin-square"></i> Linkedin</a></li>
						<li><a href="#"><i class="fa fa-youtube"></i> Youtube</a></li>
						<li><a href="#"><i class="fa fa-instagram"></i> Instagram</a></li>
						<li><a href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="wrap-footer">
			<div class="container">
				<div class="row">
					<div class="col-md-3 col-footer footer-1">
						<div class="heading"><h4>About Us</h4></div>
						<div class="content">
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
						</div>
					</div>
					<div class="col-md-3 col-footer footer-2">
						<div class="heading"><h4>Partners</h4></div>
						<div class="content">
							<div class="row">
								<div class="col-md-6">
									<a href="#"><img src="images/15.jpg" /></a>
								</div>
								<div class="col-md-6">
									<a href="#"><img src="images/16.jpg" /></a>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<a href="#"><img src="images/17.jpg" /></a>
								</div>
								<div class="col-md-6">
									<a href="#"><img src="images/18.jpg" /></a>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<a href="#"><img src="images/19.jpg" /></a>
								</div>
								<div class="col-md-6">
									<a href="#"><img src="images/20.jpg" /></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3 col-footer footer-3">
						<div class="heading"><h4>Instagram</h4></div>
						<div class="content">
							<div class="row">
								<div class="col-md-4">
									<a href="#"><img src="images/f1.jpg" /></a>
								</div>
								<div class="col-md-4">
									<a href="#"><img src="images/f2.jpg" /></a>
								</div>
								<div class="col-md-4">
									<a href="#"><img src="images/f3.jpg" /></a>
								</div>
							</div>
							<div class="row">
								<div class="col-md-4">
									<a href="#"><img src="images/f4.jpg" /></a>
								</div>
								<div class="col-md-4">
									<a href="#"><img src="images/f5.jpg" /></a>
								</div>
								<div class="col-md-4">
									<a href="#"><img src="images/f6.jpg" /></a>
								</div>
							</div>
							<div class="row">
								<div class="col-md-4">
									<a href="#"><img src="images/f7.jpg" /></a>
								</div>
								<div class="col-md-4">
									<a href="#"><img src="images/f8.jpg" /></a>
								</div>
								<div class="col-md-4">
									<a href="#"><img src="images/f9.jpg" /></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3 col-footer footer-4">
						<div class="heading"><h4>Tags Cloud</h4></div>
						<div class="content">
							<ul>
								<li><a href="#">Lorem</a></li>
								<li><a href="#">Ipsum</a></li>
								<li><a href="#">Euismod</a></li>
								<li><a href="#">Laoreet</a></li>
								<li><a href="#">Dolore</a></li>
								<li><a href="#">Dasdas</a></li>
								<li><a href="#">Consectetuer</a></li>
								<li><a href="#">Aasdasls</a></li>
							</ul>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		<div class="copyright">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<div class="copyright">Copyright &copy; Your Website <br/>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></div>
					</div>
					<div class="col-md-4">
						<ul class="list-inline social-buttons">
							<li><a href="#"><i class="fa fa-twitter"></i></a>
							</li>
							<li><a href="#"><i class="fa fa-facebook"></i></a>
							</li>
							<li><a href="#"><i class="fa fa-linkedin"></i></a>
							</li>
						</ul>
					</div>
					<div class="col-md-4">
						<ul class="list-inline quicklinks">
							<li><a href="#">Privacy Policy</a>
							</li>
							<li><a href="#">Terms of Use</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<!-- Footer -->



<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>

<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>


</body>
</html>